<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../static/jquery-3.7.1.js" th:src="@{/jquery-3.7.1.js}"></script>

</head>
<body>
<div>
    <audio id = 'myAudio' src="https://www.w3schools.com/html/horse.mp3" controls></audio>
    <input type="button" value="点击" onclick="btn()">
</div>
<script>
    function btn() {
        $.ajax( {
            url: "/musicTest",
            type: "Get",
            success: function(data) {
                // 确保获取原生DOM元素，而不是jQuery对象
                const audioElement = document.getElementById('myAudio');

                if (audioElement) {
                    // 确保result是有效的URL
                    if (data.result) {
                        let msg = data.msg.split("：")[1]
                        audioElement.src = msg.trim();

                        // 调用原生load()方法，而非jQuery的load()
                        audioElement.load();

                        console.log("音频地址已更新为：", msg.trim());
                    } else {
                        console.error("无效的音频URL:", data.msg);
                    }
                } else {
                    console.error("未找到ID为myAudio的元素");
                }
                console.log(data)
            }
        })
    }

</script>
</body>
</html>